import 'package:flutter/material.dart';
import 'package:live_client/views/components/BottomBarProvider.dart';
import 'package:live_client/views/base/common.dart';

class BottomBar extends StatefulWidget {
  final BottomBarProvider provider;

  BottomBar({this.provider});

  @override
  _BottomBarState createState() => _BottomBarState();
}

class _BottomBarState extends State<BottomBar> {
  @override
  Widget build(BuildContext context) {
    var rpx = MediaQuery.of(context).size.width / 750;

    return BottomAppBar(
      child: Container(
        height: GlobalConfig.bottomBarHeight * rpx,
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Expanded(
              child: BottomButton(
                provider: widget.provider,
                curPage: 0,
                iconData: widget.provider.homeIcon,
                label: GlobalConfig.homeText,
              ),
            ),
            Expanded(
              child: BottomButton(
                provider: widget.provider,
                curPage: 1,
                iconData: widget.provider.liveIcon,
                label: GlobalConfig.liveText,
              ),
            ),
            Expanded(
              child: BottomButton(
                provider: widget.provider,
                curPage: 2,
                iconData: widget.provider.mineIcon,
                label: GlobalConfig.mineText,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class BottomButton extends StatefulWidget {
  final BottomBarProvider provider;
  final int curPage;
  final IconData iconData;
  final String label;
  final Color color;

  BottomButton(
      {this.provider, this.curPage, this.iconData, this.label, this.color});

  @override
  _BottomButtonState createState() => _BottomButtonState();
}

class _BottomButtonState extends State<BottomButton>
    with SingleTickerProviderStateMixin {
  AnimationController animationController;
  Animation animation;

  @override
  void initState() {
    super.initState();
    animationController = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 150),
    );
    Tween tween = Tween(begin: 1.0, end: 0.8);
    animation = tween.animate(animationController)
      ..addStatusListener(
        (status) {
          // print(animation.value);
          if (status == AnimationStatus.completed) {
            animationController.reverse();
          }
        },
      );
    animationController.forward();
  }

  @override
  void dispose() {
    animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    var rpx = MediaQuery.of(context).size.width / 750;

    return GestureDetector(
      onTap: () {
        animationController.forward();
        widget.provider.goToPage(widget.curPage);
      },
      child: AnimatedBuilder(
        animation: animation,
        builder: (context, child) => Transform.scale(
          scale: animation.value,
          child: Opacity(opacity: animation.value, child: child),
        ),
        child: Container(
          decoration: BoxDecoration(
              border: Border.symmetric(
                  horizontal: BorderSide(color: Colors.white, width: 0.1))),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(
                widget.iconData,
                color: widget.curPage == widget.provider.curPage
                    ? Colors.red
                    : Colors.black54,
                size: widget.curPage == widget.provider.curPage
                    ? GlobalConfig.bottomBarIconSize * rpx
                    : (GlobalConfig.bottomBarIconSize - 2) * rpx,
              ),
              Text(
                widget.label,
                style: TextStyle(
                    fontSize: widget.curPage == widget.provider.curPage
                        ? GlobalConfig.bottomBarTextSize * rpx
                        : (GlobalConfig.bottomBarTextSize - 2) * rpx,
                    color: widget.curPage == widget.provider.curPage
                        ? Colors.red
                        : Colors.black54,
                    fontWeight: FontWeight.w500),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
